.filter-bar {
    display:flex;
}

.filter-bar__input {
    font-family:"Proxima Nova", Helvetica, sans-serif;
    font-size:14px;
    padding:20px;
    border:none;
    width:100%;
}

.filter-bar__filter-group {
    position:relative;
    flex-shrink:0;
    height:60px;

    &:after {
        position: absolute;
        top:10px;
        right:10px;
        bottom:10px;
        content:'';
        border-right:1px solid #ddd;
    }

    &:last-of-type {
        &:after {
            display:none;
        }
    }

    .vdp-datepicker {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
}

.filter-bar__input {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.filter-bar__filter-container {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.filter-bar__filter-group--50 {
    width:50%;
}

.filter-bar__filter-group--30 {
    width:30%;
}

.filter-bar__input-icon-container {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.filter-bar__icon-container {
    position: absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    width:18px;

    .cls-1 {
        stroke:#777777;
    }
}